<template>
  <div class="page my">
    <div class="header bg f-r a-c">
      <div class="left">
        <van-image width="71px" height="71px" round :src="require('../../assets/my/head.png')">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <!-- <div class="bigger" @click="routerJump('/my_Elder',2)">老年版</div> -->

      </div>

      <div class="right">
        <div class="username">{{ userInfo.username }}</div>
        <div class="phone">{{ userInfo.phone }}</div>
      </div>
    </div>
    <div class="content">
      <div class="banner bg" @click="routerJump('/my-project')" />
      <div class="cell-group">
        <van-cell-group>
          <van-cell is-link to="/my-help">
            <template #title>
              <div class="f-r a-c">
                <img class="img-icon" :src="cellIcon1" alt="">
                <span style="margin-left: 10px">我的帮服</span>
              </div>
            </template>
          </van-cell>
          <van-cell is-link to="/my-qs">
            <template #title>
              <div class="f-r a-c">
                <img class="img-icon" :src="cellIcon2" alt="">
                <span style="margin-left: 10px">我的问题</span>
              </div>
            </template>
          </van-cell>
          <van-cell is-link to="/my-consulting">
            <template #title>
              <div class="f-r a-c">
                <img class="img-icon" :src="cellIcon2" alt="">
                <span style="margin-left: 10px">我的咨询</span>
              </div>
            </template>
          </van-cell>
          <van-cell is-link :value="projectList.userComSum == 0? '' :projectList.userComSum+'条服务待评价'" to="/my-evaluation">
            <template #title>
              <div class="f-r a-c">
                <img class="img-icon" :src="cellIcon3" alt="">
                <span style="margin-left: 10px">我的评价</span>
              </div>
            </template>
          </van-cell>
          <van-cell is-link :value="projectList.interComSum == 0? '' :projectList.interComSum+'条服务待评价'" to="/evaluation">
            <template #title>
              <div class="f-r a-c">
                <img class="img-icon" :src="cellIcon4" alt="">
                <span style="margin-left: 10px">中介评价</span>
              </div>
            </template>
          </van-cell>
          <van-cell is-link :value="projectList.warningSum == 0? '' :'预警数量'+projectList.warningSum+'条'" to="/projectwarn">
            <template #title>
              <div class="f-r a-c">
                <img class="img-icon" :src="cellIcon5" alt="">
                <span style="margin-left: 10px">项目预警</span>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <el-button type="primary" style="width: 100%;margin: 20px 0;" @click="logout">退出登录</el-button>
    </div>
    <TabBar url="/my" />

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { http_my } from '@/api'
export default {
  name: 'My',
  data() {
    return {
      cellIcon1: require('@/assets/my/icon1.png'),
      cellIcon2: require('@/assets/my/icon2.png'),
      cellIcon3: require('@/assets/my/icon3.png'),
      cellIcon4: require('@/assets/my/icon4.png'),
      cellIcon5: require('@/assets/my/icon5.png'),
      projectList: { userComSum: 0, interComSum: 0, warningSum: 0 }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    http_my.page().then(res => {
      this.projectList = res.data
    })
    // eslint-disable-next-line new-cap
  },
  methods: {
    logout() {
      this.$store.dispatch('user/logout')
    }
  }
}
</script>

<style lang="scss">
.my {
    padding-top: 0;
}
.my {
    .img-icon {
        width: 24px;
        height: 24px;
    }
    .header {
        padding-top: 37px;
        width: 100%;
        height:167px;
        background-image: url('~@/assets/my/header_bg.png');
        padding-left: 16px;
        padding-bottom: 36px;
        .right {
            margin-left: 20px;
            .username {
                font-size: 23px;
                line-height: 23px;
                margin-bottom: 13px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
            }
            .phone {
                font-size: 16px;
                line-height: 16px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
            }
        }
    }
    .banner {
        margin-bottom: 20px;
        width: 100%;
        height: 91px;
        background-image: url('~@/assets/my/banner.png');
    }
    .cell-group {
        border-radius: 10px;
        overflow: hidden;
    }
}
.bigger{
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 17px;
  width: fit-content;
  float: right;
  position: absolute;
  top: 30px;
  right: 18px;
}
</style>
